import React, { Component } from 'react'

// 子组件
class Child extends Component {
  /**
   * 组件卸载之前先执行
   * 1. 清除定时器或解除事件绑定
   */
  componentWillUnmount() {
    console.log('Child组件要被销毁了！')
  }

  render() {
    return <div>子组件</div>
  }
}

// 父组件
class Index extends Component {
  constructor(props) {
    super(props)
    // =>执行一次
    console.log('1. 执行constructor()')
    // 定义响应数据
    this.state = {
      count: 0,
      isShow: true,
    }
  }

  // state = {}

  // 加载时=>执行一次 =》vue=》created
  /**
   * 组件第一次加载后
   * 1. 发送ajax请求
   * 2. 操作DOM
   */
  componentDidMount() {
    console.log('3. 执行componentDidMount()')
  }

  /**
   * 更新完成后执行
   * 1. 发送ajax请求
   * 2. 操作DOM
   * @param {*} prevProps 上一次的props
   * @param {*} prevState 上一次的state
   */
  componentDidUpdate(prevProps, prevState) {
    console.log('4. 执行componentDidUpdate()', prevProps, prevState, this.state)
    if (prevState.count !== this.state.count) {
      this.setState({
        count: 1,
      })
    }
  }

  handlerAdd = (e) => {
    // 触发更新时
    this.setState({
      count: 1,
      isShow: !this.state.isShow,
    })
  }

  handlerForce = (e) => {
    // 强制更新
    this.forceUpdate()
  }

  render() {
    console.log('2. 执行render()')
    // this.setState({ count: 1 })
    return (
      <div>
        <h1>生命周期</h1>
        <p>{this.state.count}</p>
        <button onClick={this.handlerAdd}>add</button>
        <button onClick={this.handlerForce}>forceUpdate</button>
        <hr />
        {this.state.isShow ? <Child /> : null}
      </div>
    )
  }
}

export default Index
